<template>
  <section
    ref="payAccountRef"
    class="dashboard"
  />
</template>
<script lang="ts">
import {
  defineComponent, onMounted, nextTick, ref,
} from 'vue';

import { useDebounceFn } from '@vueuse/core';
import { init } from 'echarts';

import type { EChartsOption } from 'echarts';

export default defineComponent({
  setup() {
    const payAccountRef = ref();
    const createChart = () => {
      const payAccountChart = init(payAccountRef.value);
      const option: EChartsOption = {
        grid: {
          top: 0,
          left: 6,
          right: 6,
          bottom: 0,
        },
        tooltip: {
          trigger: 'axis',
          formatter: '{c0}',
          axisPointer: {
            type: 'shadow',
          },
        },
        xAxis: {
          type: 'category',
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        yAxis: {
          type: 'value',
          min: 0,
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            data: [7, 5, 4, 2, 4, 7, 5, 6, 5, 9, 6, 3, 1, 5, 3, 6, 5, 9, 7, 6],
            type: 'bar',
            barWidth: '46%',
            itemStyle: {
              color: '#007af5',
            },
          }
        ],
      };

      payAccountChart.setOption(option);
      window.addEventListener('resize', useDebounceFn(() => {
        payAccountChart.resize();
      }, 200));
    };
    onMounted(() => {
      nextTick(() => {
        createChart();
      });
    });
    return {
      payAccountRef,
    };
  },
});
</script>
<style lang="scss" scoped>
.dashboard {
  display: flex;
  flex: 1;
  align-items: flex-end;
  height: 46px;
}
</style>
